<div class="row">
  <div class="colxl-12 col-lg-12 col-md-12 col-sm-12 col-12">
    <div class="page-title-wrapper">
      <div class="page-title-box">
        <h4 class="page-title bold">主题管理</h4>
      </div>
      <div class="breadcrumb-list">
        <ul>
          <li class="breadcrumb-link"><a th:href="@{admin}"><i class="fas fa-home mr-2"></i>首页</a></li>
          <li class="breadcrumb-link active">网站管理</li>
          <li class="breadcrumb-link active">主题管理</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="colxl-12 col-lg-12 col-md-12 col-sm-12 col-12">
    <div class="page-title-wrapper">
      <div class="page-title-box web-title-box-use">
        <h4 class="page-title"></h4>
      </div>
      <div class="web-breadcrumb">
            <div class="add-group"><a id="btn_add" class="btn btn-primary mt-2 mr-2 sm-btn"><i class="fa fa-plus"></i>添加主题</a></div>
      </div>
    </div>
  </div>
</div>
<div class="row" id="themePanel">
  <div class="col-xl-3 col-lg-3 col-md-3 col-sm-6 col-12" th:each="theme: ${themes}">
    <div class="card-header" th:id="${theme.id}" style="overflow: hidden;position: relative;">
      <h6 th:text="${theme.name}"></h6>
      <div th:if="${theme.status==1}" class="product-overlay">
        <h6>启用</h6>
      </div>
    </div>
    <div class="card">
      <img alt="theme-img" height="100px;" th:onclick="previewImg([[${theme.img}]])" th:src="${theme.img}"/>
      <div class="btn-group" role="group" aria-label="操作">
        <button th:if="${theme.status==0}" class="btn btn-primary sm-btn flat-btn" type="button" th:onclick="useTheme([[${theme.id}]])"  title="启用" ><i class="fa fa-lock"></i></button>
        <button th:if="${theme.status==1}" class="btn btn-primary sm-btn flat-btn" type="button" th:onclick="useTheme([[${theme.id}]])"  title="已启用" ><i class="fa fa-lock-open"></i></button>
        <button class="btn btn-primary sm-btn flat-btn" type="button"  title="编辑"><i class="fa fa-edit"></i></button>
        <button class="btn btn-primary sm-btn flat-btn" type="button"  th:onclick="deleteRow([[${theme.id}]])" title="删除"><i class="fa fa-trash-alt"></i></button>
      </div>
      </div>
  </div>
</div>
<!-- 表单模态框 -->
<section id="formModalWrapper">
  <div class="modal fade" id="formModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="formTitle"></h5>
          <button type="button" class="close" data-dismiss="modal">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div id="formContent">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<script>
  $(function () {
    // 新增
    $('#btn_add').on('click', function () {
      Core.load("#formContent", "/theme/add", function () {
        $('#formTitle').text('新增主题')
        $("#formModal").modal('show');
      });
    })
    //只是在点击后初始化的时候生成
    $("#formModal").on("shown.bs.modal", function () {
      var uploader = WebUploader.create({
        auto: true,
        pick: {
          id: '#filePicker',
          label: '点击选择主题包'
        },
        swf: '/admin1/img/Uploader.swf',
        server: '[[@{/theme/upload}]]',
        accept: {
          title: 'zip',
          extensions: 'zip',
          mimeTypes: ' application/zip'
        },
        disableGlobalDnd: true
      });
      uploader.on('uploadSuccess', function (file, data) {
        layer.msg('上传成功');
        location.reload();
      });
      uploader.on('uploadError', function (file) {
        layer.msg('上传失败');
      });
    })
  });


  // 启动主题
  function useTheme(id) {
    Core.confirm("确定启用该主题？", function () {
      Core.postAjax("/theme/use", {"id": id}, function (data) {
        if (data.status === 200) {
          location.reload();
        }
        layer.msg(data.msg);
      })
    })
  }

  // 删除
  function deleteRow(id) {
    Core.confirm("确定删除？", function () {
      Core.postAjax("/theme/delete", {"id": id}, function (data) {
        if (data.status === 200) {
          $('#'+id).parent().remove();
        }
        layer.msg(data.msg);
      })
    })
  }

  function previewImg(src) {
    layer.open({
      type: 1,
      title: false,
      closeBtn: 0,
      area: '45%',
      skin: 'layui-layer-nobg', //没有背景色
      shadeClose: true,
      content: '<img style="width: 100%" alt="link" src="' + src + '">'
    });
  }

</script>